<template>
  <el-dialog title="关联客户模块" :visible="visible" width="80%">
    <div class="customer-relation">
      <div class="page-header">
        <div class="page-title">

        </div>
        <div class="header-right">
          <el-button type="primary" @click="addCustomer">新建客户</el-button>
          <el-dropdown trigger="click" class="more">
            <el-button><i class="el-icon-more"></i></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><i class="rp rp-import"></i>导入</el-dropdown-item>
              <el-dropdown-item><i class="rp rp-export"></i>导出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>

      <div class="searchBox">
        <el-input v-model="search" placeholder="客户名称/手机/电话" class="search-input">
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>

        <div class="tabsBox">
          <span class="options-label">显示：</span>
          <el-button v-for="item in sceneList.filter((res) => res.isSystem != 0)" :key="item.sceneId"
            :class="avtiveSceneId == item.sceneId ? 'activeScene' : ''" @click="sceneClick(item, 'clearSceneName')">{{
              item.name }}</el-button>
          <el-dropdown trigger="click">
            <el-button size="small" :type="activeSceneName ? 'primary' : ''">
              {{ activeSceneName
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" class="commonDropdown">
              <el-dropdown-item v-for="(item, index) in tabs.filter((res) => res.isSystem != 1)" :key="item.sceneId"
                :class="avtiveSceneId == item.sceneId ? 'active' : ''" @click.native="sceneClick(item)">
                {{ item.name }}
              </el-dropdown-item>
              <el-dropdown-item class="last" @click.native="setScene()">
                <i class="el-icon-s-tools"></i>
                <span>场景设置1</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div>
          <table-header-filters :selection-list="tableSelectionList" :condition-type-fun="undefined"
            :fields="getFilterFields" :props="tableHeaderProps.props"
            :filter-header-props="tableHeaderProps.filterHeaderProps" :filter-form-props="tableHeaderProps.filterFormProps"
            @operations-click="tableOperationsClick" @event-change="tableHeaderHandle" @filter-change="handleFilter" />
        </div>
      </div>
      <div class="listTable">
        <clueTable :tableData="tableData" :freezingColumn="freezingColumn"></clueTable>
      </div>

    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import clueTable from '@/components/clueManage/clues/clueTable'
import forzenHeader from '@/views/customerManage/custom/forzenHeader';
import TableHeaderFilters from '@/components/FieldFilters/TableHeaderFilters'
import TableMixin from '@/components/FieldFilters/tableMixin'

export default {
  name: "customerRelation",
  components: { clueTable, TableHeaderFilters },
  mixins: [TableMixin],
  props: {
    visible: Boolean,
    phone: String,
    action: {
      type: Object,
      default: () => {
        return {
          type: "save",
          id: "",
          data: {},
        };
      },
    },
  },
  data () {
    return {
      loading: false,
      search: "",
      sceneList: [
        { sceneId: "1666713333092839424", isSystem: 1, name: "全部客户" },
        { sceneId: "1666713333092839425", isSystem: 1, name: "我负责的客户" },
        { sceneId: "1666713333092839426", isSystem: 1, name: "下属负责的客户" },
        { sceneId: "1666713333092839427", isSystem: 1, name: "我关注的客户" },
        { sceneId: "1666713333092839428", isSystem: 1, name: "测试场景" },
        {
          sceneId: "1666713333092839429",
          isSystem: 0,
          name: "测试场景啦啦啦啦啦啦",
        },
      ],
      avtiveSceneId: "1666713333092839424",
      activeSceneName: "",
      openScreen: true,
      tableData: [
        {merchantNum:'aaa'},
        {merchantNum:'bbb'},
        {merchantNum:'ccc'},
      ],
      freezingColumn: forzenHeader.allHeader,
      createAction: {
        type: 'save',
        id: '',
        data: {}
      },
      tabs:[],
    };
  },
  mounted () {
    this.queryTabs()
  },
  methods: {
    queryTabs () {
      this.tabs = this.sceneList;
      this.avtiveSceneId = this.tabs[0].sceneId
      this.activeSceneName = this.tabs[0].isSystem == 1 ? '' : this.tabs[0].name
    },
    cellClass ({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'merchantNum') {
        return 'look--underline'
      } else {
        return ''
      }
    },
    addCustomer(){

    },
    showRelationFun () {
      this.$emit('update:visible', false)
    },
    closeFun () {
      this.$emit('update:visible', false)
    },

  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/custom-tab-serch.scss";
.customer-relation {
  padding: 22px 32px;
  .page-header {
    display: flex;
    justify-content: space-between;

    .page-title {
      display: flex;
      align-items: center;

      .title {
        font-weight: 500;
        font-size: 24px;
        color: #172b4d;
      }

      .title-icon {
        color: #42526e;
        cursor: pointer;
        margin-left: 4px;
        font-size: 16px;
      }
    }

    .header-right {
      .more {
        margin-left: 8px;
      }
    }
  }


  .regular-row {
    display: flex;
    flex-direction: row;
    text-align: left;
    align-items: center;
    width: 100%;

    .search-input {
      width: 200px;
    }

    .options-wrap {
      margin-left: 24px;
      display: flex;
      flex: 1;
      overflow-x: auto;
      white-space: nowrap;
      align-items: center;

      .options-label {
        margin-right: 8px;
      }
    }
  }

  .activeScene {
    color: #fff;
    background-color: #344563;
  }

  .senior-scene {
    margin-top: 8px;
    padding: 16px;
    box-shadow: 0 4px 8px -2px rgba(9, 30, 66, 0.25),
      0 0 1px rgba(9, 30, 66, 0.31);

    .senior-scene-title {
      color: #5e6c84;
    }

    .senior-scene-btn-wrap {
      margin-top: 10px;
    }

  }
}
</style>
